<template>
    <div class="menu-wrapper">
        <el-form ref="sysMchForm" :model="form" label-width="120px">
            <div style="
          width: 100%;
          display: flex;
          justify-content: space-between;
          border-bottom: 1px #eee solid;
          margin-bottom: 20px;
        ">
                <span style="font-size: 18px; color: #409eff; margin: 10px 0">基本信息</span>
                <div>
                  <el-button v-permission="['sysMch.edit']" :type="shopgetinfo.status == 1?'danger': 'primary'" @click="auditClick(shopgetinfo)">{{ shopgetinfo.status | watchStatusBotton }}</el-button>
<!--                  <el-button v-permission="['sysMch.edit']" type="primary" @click="editlist">修改</el-button>-->
                </div>
            </div>
            <div class="sysMch_header">
                <div class="sysMch_header_left">
                    <div class="account_item">
                        <span class="account_item_title">公司简称</span>
                        <span class="account_item_content">{{ shopgetinfo.name }}</span>
                    </div>
                    <div class="account_item">
                        <span class="account_item_title">代理商简称</span>
                        <span class="account_item_content">{{ shopgetinfo.shortName }}</span>
                    </div>
                    <div class="account_item">
                        <span class="account_item_title">所属商户</span>
                        <span class="account_item_content">{{ shopgetinfo.parentMchName }}</span>
                    </div>
                    <div class="account_item">
                        <span class="account_item_title">行业版本</span>
                        <span class="account_item_content">{{shopgetinfo.scopeType|mchTypeFormatter}}</span>
                    </div>
                </div>
                <div style="margin-left:100px;display:flex">
                    <span style="font-size:14px;color: #606266;font-weight: 700;margin-right:20px">logo</span>
                    <div class="shop_img">
                        <img :src="shopgetinfo.logo" style="width:140px;height:140px" alt="" v-if="shopgetinfo.logo!=null&&MuchShow==false">
                        <span class="shop_img_notitle" v-if="shopgetinfo.logo==null&&MuchShow==false">暂无logo</span>
                    </div>
                </div>
            </div>

            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="经营信息" name="first">
                <account :mchId="detailsId" :shopgetinfo='shopgetinfo' :MuchShow='MuchShow' :district='district'></account>
              </el-tab-pane>
              <el-tab-pane label="结算信息" name="bank">
                <bankinformation :shopgetinfo='shopgetinfo' :MuchShow='MuchShow'></bankinformation>
              </el-tab-pane>
              <el-tab-pane label="进件管理" name="importtab">
                <importtab :shopgetinfo='shopgetinfo'></importtab>
              </el-tab-pane>

<!--                <el-tab-pane label="店铺信息" name="first">-->
<!--                    <account :mchId="detailsId" :shopgetinfo='shopgetinfo' :MuchShow='MuchShow' :district='district'></account>-->
<!--                </el-tab-pane>-->
<!--                <el-tab-pane label="代理商资料" name="security">-->
<!--                    <security :shopgetinfo='shopgetinfo' :MuchShow='MuchShow'></security>-->
<!--                </el-tab-pane>-->
<!--                <el-tab-pane label="进件管理" name="importtab">-->
<!--                    <importtab></importtab>-->
<!--                </el-tab-pane>-->
            </el-tabs>

        </el-form>
        <menu-dialog ref="menuDialog" @confirm="dialogConfirm" />
    </div>
</template>
<style scoped>
.menu-wrapper {
    margin: 15px;
}
.boxone {
    display: flex;
    width: 80%;
    justify-content: space-between;
}
.font_title {
    width: 205px;
}
.sysMch_header {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.shop_img {
    width: 140px;
    height: 140px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    margin-left: 5px;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.shop_img_notitle {
    font-size: 14px;
    color: #c0c4cc;
}

.account_item {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 30px;
}

.account_item_title {
    font-size: 14px;
    color: #606266;
    width: 160px;
    display: block;
}

.account_item_content {
    font-size: 14px;
    color: #303133;
}
/deep/ label {
  font-weight: 400!important;
}
</style>
<script>
import bankinformation from "../../views/sysMch/components/banklist";
import security from "../../views/sysMch/components/security";
import account from "../../views/sysMch/components/Account";
import banklist from "../../views/sysMch/components/bank";
import importtab from "../../views/sysMch/components/importtab";
import permission from "@/directive/permission/index.js";
import { EventBus } from "@/api/eventBus";
import utils from "../../utils/utils.js";
import Distpicker from "@/components/Distpicker/Distpicker";
import { getMchInfo } from "@/api/sysSetUp";
import {
    find,
    update,
    addOrUpdateMchMenu,
    initISVData,
    resetPwd,
    wxImport,
    wxSelectApply,
} from "@/api/sysMch";
import { checkUserExists } from "@/api/sysUser";
import MenuDialog from "../../views/sysMch/components/MenuDialog";
import singleUpload from "@/components/Upload/singleUpload";
import md5 from "js-md5";
export default {
    name: "agent-details",
    components: {
        Distpicker,
        MenuDialog,
        banklist,
        importtab,
        account,
        security,
        singleUpload,
      bankinformation
    },
    directives: { permission },
    data() {
        return {
            classshow: null,
            detailsId: null,
            activeName: "first",
            id: "",
            clicked: false, // 按钮防双击
            district: { province: 350000, city: 350200, area: 350203 },
            form: {
                id: "",
                name: "",
                shortName: "",
                linkman: "",
                phone: "",
                remark: "",
                areaId: 440000,
                areaName: "广东省广州市海珠区",
                address: "",
                status: 0,
                logo: "",
                scopeType: "",
            },
            renovationDisabled: false,
            importform: {},
            importarray: [],
            time: null,
            shopgetinfo: {},
            MuchShow: false,
            singleUploadTitle: "200*200",
        };
    },

    watch: {
        // 路由地址不变的情况下,如果id变化则重新获取数据
        $route(newVal, oldVal) {
            console.log(newVal);
            if (newVal.name == "agent-edit" && newVal.query.id != this.id) {
                this.getData();
            }
        },
    },
    created() {
        this.detailsId = this.$route.query.id;
        this.getData();
    },
    filters: {
      watchStatusBotton(val) {
        if (val == 0) {
          return '审核'
        } else if (val == 1) {
          return '停用'
        } else if (val == 2) {
          return '启用'
        }
      },

      mchTypeFormatter(val) {
            if (val == 1) {
                return "标准版";
            } else if (val == 2) {
                return "餐饮版";
            } else if (val == 3) {
                return "水站版";
            } else if (val == 4) {
                return "商超版";
            } else if (val == 5) {
                return "景区版";
            } else if (val == 6) {
                return "美业版";
            }
        },
    },

    methods: {
      auditClick(row) {
        let form = {
          id: row.id,
          status: 0
        }
        let text = ''
        if (row.status == 0) {
          form.status = 1
          text = '审核通过'
        } else if (row.status == 1) {
          form.status = 2
          text = '停用'
        } else if (row.status == 2) {
          form.status = 1
          text = '启用'
        }
        this.$confirm(`此操作将${text}该商户, 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          update(form).then(response => {
            console.log(response)
            this.shopgetinfo = response.data
            this.shopgetinfo = response.data
            console.log(response.data , "1111111111111")
            console.log(this.shopgetinfo , "22222222222222222")
            // this.loadSysMch()
            this.$message({ type: 'success', message: `${text}成功!`});
          }).catch(error => {})
        }).catch(() => {
          this.$message({ type: 'info', message: `已取消${text}`});
        })
      },

      getData() {
            this.id = this.$route.query.id;
            const _this = this;
            find(this.id)
                .then((response) => {
                    console.log(utils.dateFormatter(response.data.sysMch.expiredDate))
                    if (response.data.sysMch.expiredDate) {
                        response.data.sysMch.expiredDate = utils.dateFormatter(response.data.sysMch.expiredDate);
                    }
                    _this.shopgetinfo = response.data.sysMch;
                })
                .catch((error) => {});
        },

        editlist() {
            this.$router.push({
                path: "/agent/edit",
                query: { id: this.detailsId },
            });
        },
        dialogShow() {
            console.log("开启菜单选择弹窗");
            this.mchId = this.detailsId;
            this.$refs.menuDialog.show(this.detailsId);
        },
        dialogConfirm(menus, callback) {
            const _this = this;
            const params = new URLSearchParams();
            params.append("id", this.mchId);
            var list = [];
            menus.forEach(function (item) {
                list.push(item.id);
            });
            addOrUpdateMchMenu(params, list)
                .then((response) => {
                    console.log(response);
                    callback(false);
                })
                .catch(() => {
                    callback(false);
                });
        },
        pluginClick() {
            this.$router.push({
                path: "/sysPlugin/list",
                query: { mchId: this.detailsId },
            });
        },
        initISVDataFn() {
            this.$confirm("此操作将执行一键装修, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    const params = { mchId: this.detailsId };
                    initISVData(params)
                        .then((res) => {
                            console.log(res);
                            this.$message({
                                type: "success",
                                message: "装修成功!",
                            });
                            this.renovationDisabled = true;
                        })
                        .catch(() => {
                            this.$message({
                                type: "info",
                                message: "装修失败!",
                            });
                        });
                })
                .catch(() => {
                    this.$message({ type: "info", message: "已取消装修" });
                });
        },
        resetPwd(row) {
            console.log(row);
            this.$confirm("确定要重置密码为用户名吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    resetPwd(this.detailsId)
                        .then((resolve) => {
                            console.log(resolve);
                            this.$message({
                                type: "success",
                                message: "重置后密码为用户名!",
                            });
                        })
                        .catch((error) => {
                            console.log(error);
                        });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消重置",
                    });
                });
        },
        handleClick(val) {},
    },
};
</script>
